<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, user-scalable=no">
    <title>签到打卡 - 综合服务平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            font-size: 28px;
            width: 750px;
            overflow-x: hidden;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
            padding-bottom: 150px;
        }
        
        /* 顶部导航 */
        .header {
            background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
            color: white;
            padding: 30px;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .back-btn {
            font-size: 40px;
            color: white;
            cursor: pointer;
        }
        
        .header-title {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            flex: 1;
        }
        
        .action-btn {
            font-size: 36px;
            color: white;
            cursor: pointer;
        }
        
        /* 签到卡片 */
        .sign-card {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .card-title {
            font-size: 36px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
        }
        
        .card-title i {
            margin-right: 15px;
            color: #1a73e8;
        }
        
        .task-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        
        .info-item {
            background: #f8f9fa;
            border-radius: 20px;
            padding: 25px;
            flex: 1;
            margin: 0 10px;
            text-align: center;
        }
        
        .info-label {
            font-size: 26px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }
        
        .info-value {
            font-size: 36px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .info-value.small {
            font-size: 30px;
        }
        
        .deadline {
            background: #fff8e1;
            border-left: 5px solid #ffc107;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            font-size: 28px;
            color: #7f8c8d;
            display: flex;
            align-items: center;
        }
        
        .deadline i {
            margin-right: 15px;
            font-size: 36px;
            color: #ffc107;
        }
        
        /* 地图区域 */
        .map-container {
            height: 400px;
            background: #e0e0e0;
            border-radius: 20px;
            margin: 30px 0;
            position: relative;
            overflow: hidden;
            background-image: url('https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/108.3200,22.8200,14/750x400?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA');
            background-size: cover;
            background-position: center;
        }
        
        .user-marker {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100%);
            width: 40px;
            height: 40px;
            background: #1a73e8;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.5);
        }
        
        .target-marker {
            position: absolute;
            top: 40%;
            left: 60%;
            transform: translate(-50%, -100%);
            width: 50px;
            height: 50px;
        }
        
        .target-marker i {
            font-size: 50px;
            color: #e74c3c;
            text-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        
        .distance-info {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
            display: flex;
            align-items: center;
        }
        
        .distance-info i {
            margin-right: 10px;
            color: #1a73e8;
        }
        
        /* 签到按钮 */
        .sign-btn-container {
            text-align: center;
            margin: 40px 0 20px;
        }
        
        .sign-btn {
            background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
            color: white;
            border: none;
            padding: 30px 80px;
            border-radius: 15px;
            font-size: 36px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(76, 175, 80, 0.3);
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
        }
        
        .sign-btn i {
            margin-right: 15px;
        }
        
        .sign-btn:disabled {
            background: #bdbdbd;
            cursor: not-allowed;
            box-shadow: none;
        }
        
        .sign-btn:not(:disabled):hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(76, 175, 80, 0.4);
        }
        
        .sign-tip {
            text-align: center;
            font-size: 26px;
            color: #7f8c8d;
            margin-top: 20px;
        }
        
        /* 签到记录 */
        .record-section {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 34px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .filter-btn {
            background: #e8f0fe;
            color: #1a73e8;
            border: none;
            padding: 15px 25px;
            border-radius: 15px;
            font-size: 26px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        
        .filter-btn i {
            margin-right: 10px;
        }
        
        .record-list {
            max-height: 500px;
            overflow-y: auto;
        }
        
        .record-item {
            display: flex;
            padding: 25px 0;
            border-bottom: 1px solid #eee;
        }
        
        .record-item:last-child {
            border-bottom: none;
        }
        
        .record-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #e8f5e9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #4caf50;
            margin-right: 25px;
            flex-shrink: 0;
        }
        
        .record-details {
            flex: 1;
        }
        
        .record-title {
            font-size: 30px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .record-meta {
            display: flex;
            font-size: 26px;
            color: #7f8c8d;
        }
        
        .record-meta div {
            margin-right: 20px;
            display: flex;
            align-items: center;
        }
        
        .record-meta i {
            margin-right: 8px;
        }
        
        .record-status {
            font-size: 26px;
            font-weight: bold;
            align-self: center;
        }
        
        .status-success {
            color: #4caf50;
        }
        
        .status-late {
            color: #ff9800;
        }
        
        .status-missed {
            color: #f44336;
        }
        
        /* 签到统计 */
        .stats-container {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        .stat-card {
            background: #f8f9fa;
            border-radius: 20px;
            padding: 25px;
            flex: 1;
            margin: 0 10px;
            text-align: center;
        }
        
        .stat-value {
            font-size: 40px;
            font-weight: bold;
            color: #1a73e8;
            margin-bottom: 10px;
        }
        
        .stat-label {
            font-size: 26px;
            color: #7f8c8d;
        }
        
        /* 图表容器 */
        .chart-container {
            height: 300px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="header-title">每日签到打卡</div>
            <div class="action-btn">
                <i class="fas fa-history"></i>
            </div>
        </div>
        
        <!-- 签到卡片 -->
        <div class="sign-card">
            <div class="card-title">
                <i class="fas fa-map-marker-alt"></i> 今日签到任务
            </div>
            
            <div class="task-info">
                <div class="info-item">
                    <div class="info-label">任务名称</div>
                    <div class="info-value small">早班打卡</div>
                </div>
                <div class="info-item">
                    <div class="info-label">签到时间</div>
                    <div class="info-value small">08:00-09:00</div>
                </div>
                <div class="info-item">
                    <div class="info-label">今日积分</div>
                    <div class="info-value">+10</div>
                </div>
            </div>
            
            <div class="deadline">
                <i class="fas fa-exclamation-circle"></i> 请在规定时间内到达指定地点签到，迟到将减少积分奖励
            </div>
            
            <div class="map-container">
                <div class="user-marker"></div>
                <div class="target-marker">
                    <i class="fas fa-bullseye"></i>
                </div>
                <div class="distance-info">
                    <i class="fas fa-location-arrow"></i> 距离签到点：<span id="distance">325米</span>
                </div>
            </div>
            
            <div class="sign-btn-container">
                <button class="sign-btn" id="signBtn">
                    <i class="fas fa-check-circle"></i> 立即签到
                </button>
                <div class="sign-tip">
                    请确保您已到达<span style="color: #e74c3c; font-weight: bold;">南宁市青秀区金湖广场</span>附近
                </div>
            </div>
        </div>
        
        <!-- 签到记录 -->
        <div class="record-section">
            <div class="section-header">
                <div class="section-title">签到记录</div>
                <button class="filter-btn">
                    <i class="fas fa-filter"></i> 本周
                </button>
            </div>
            
            <div class="record-list">
                <!-- 今日记录 -->
                <div class="record-item">
                    <div class="record-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="record-details">
                        <div class="record-title">早班打卡</div>
                        <div class="record-meta">
                            <div><i class="far fa-clock"></i> 08:15</div>
                            <div><i class="fas fa-map-marker-alt"></i> 金湖广场</div>
                        </div>
                    </div>
                    <div class="record-status status-success">成功</div>
                </div>
                
                <!-- 昨日记录 -->
                <div class="record-item">
                    <div class="record-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="record-details">
                        <div class="record-title">早班打卡</div>
                        <div class="record-meta">
                            <div><i class="far fa-clock"></i> 08:45</div>
                            <div><i class="fas fa-map-marker-alt"></i> 金湖广场</div>
                        </div>
                    </div>
                    <div class="record-status status-late">迟到</div>
                </div>
                
                <!-- 前日记录 -->
                <div class="record-item">
                    <div class="record-icon">
                        <i class="fas fa-times"></i>
                    </div>
                    <div class="record-details">
                        <div class="record-title">早班打卡</div>
                        <div class="record-meta">
                            <div><i class="far fa-clock"></i> --:--</div>
                            <div><i class="fas fa-map-marker-alt"></i> 未签到</div>
                        </div>
                    </div>
                    <div class="record-status status-missed">缺卡</div>
                </div>
            </div>
            
            <!-- 签到统计 -->
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-value">85%</div>
                    <div class="stat-label">签到率</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">6</div>
                    <div class="stat-label">连续签到</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">120</div>
                    <div class="stat-label">总积分</div>
                </div>
            </div>
            
            <!-- 签到统计图表 -->
            <div class="chart-container">
                <canvas id="signChart"></canvas>
            </div>
        </div>
    </div>

    <script>
        // 模拟定位变化
        let currentDistance = 325;
        const distanceElement = document.getElementById('distance');
        const signBtn = document.getElementById('signBtn');
        
        // 初始状态：用户不在签到点
        signBtn.disabled = true;
        
        // 模拟用户移动
        function simulateMovement() {
            if (currentDistance > 50) {
                currentDistance -= Math.floor(Math.random() * 20) + 5;
                if (currentDistance < 50) currentDistance = 50;
                distanceElement.textContent = currentDistance + '米';
                
                // 当距离小于100米时启用签到按钮
                if (currentDistance <= 100) {
                    signBtn.disabled = false;
                    signBtn.innerHTML = '<i class="fas fa-check-circle"></i> 立即签到 (' + currentDistance + '米)';
                }
                
                setTimeout(simulateMovement, 1500);
            }
        }
        
        // 开始模拟移动
        setTimeout(simulateMovement, 2000);
        
        // 签到按钮点击事件
        signBtn.addEventListener('click', function() {
            // 获取当前时间
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const timeString = hours + ':' + minutes;
            
            // 更新UI
            this.innerHTML = '<i class="fas fa-check-circle"></i> 签到成功';
            this.style.background = 'linear-gradient(135deg, #4caf50 0%, #2e7d32 100%)';
            this.disabled = true;
            
            // 显示成功消息
            setTimeout(function() {
                alert('签到成功！\n签到时间: ' + timeString + '\n签到地点: 南宁市青秀区金湖广场');
                
                // 添加签到记录到顶部
                const recordList = document.querySelector('.record-list');
                const newRecord = document.createElement('div');
                newRecord.className = 'record-item';
                newRecord.innerHTML = `
                    <div class="record-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="record-details">
                        <div class="record-title">早班打卡</div>
                        <div class="record-meta">
                            <div><i class="far fa-clock"></i> ${timeString}</div>
                            <div><i class="fas fa-map-marker-alt"></i> 金湖广场</div>
                        </div>
                    </div>
                    <div class="record-status status-success">成功</div>
                `;
                
                recordList.insertBefore(newRecord, recordList.firstChild);
                
                // 更新统计数据
                document.querySelector('.stat-value').textContent = '87%';
                document.querySelector('.stat-value:nth-child(2)').textContent = '7';
                document.querySelector('.stat-value:nth-child(3)').textContent = '130';
                
            }, 1000);
        });
        
        // 绘制签到统计图表
        const ctx = document.getElementById('signChart').getContext('2d');
        const signChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [{
                    label: '签到时间 (分钟)',
                    data: [5, 15, 10, 25, 5, 0, 0],
                    backgroundColor: [
                        '#4caf50',
                        '#4caf50',
                        '#4caf50',
                        '#ff9800',
                        '#4caf50',
                        '#f44336',
                        '#f44336'
                    ],
                    borderWidth: 0,
                    borderRadius: 5,
                    barPercentage: 0.5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.parsed.y;
                                if (value === 0) return '缺卡';
                                if (value <= 5) return '准时';
                                return '迟到 ' + value + '分钟';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 60,
                        ticks: {
                            stepSize: 15,
                            callback: function(value) {
                                if (value === 0) return '准时';
                                if (value === 15) return '迟到15分钟';
                                if (value === 30) return '迟到30分钟';
                                if (value === 45) return '迟到45分钟';
                                if (value === 60) return '缺卡';
                                return '';
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>